<!DOCTYPE html>
	<html xmlns:wicket="http://wicket.apache.org">
	<head>
	
		<meta charset="UTF-8">
		<title>MeetUPC</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
	    <!-- Bootstrap -->
	    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	    <!-- Font Awesome -->
	    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
	
	    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>	
		<script src="js/bootbox.min.js"></script>
	
		<style>
			.affix-top {
				top: 80px;
			}
			
			.affix {
				top: 25px;
				position: fixed;
			}
		</style>
    </head>
	
	<body style="background-color: #FFFFFF;">
		<div class="navbar navbar-default navbar-static-top" style="height:55px; background-image: linear-gradient(to bottom, #0080F0, #0065BD); border-bottom-color: #0065BD;">
			<div class="container">
		    	<div class="navbar-header">
		      		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			        	<span class="icon-bar"></span>
			        	<span class="icon-bar"></span>
			        	<span class="icon-bar"></span>
		      		</button>
		      		<a class="navbar-brand" href="#" style="color:white;"><b>UPC Share Your Way</b><img src="img/upc.png" width="30" height="30"></a>
		    	</div>
			    <div class="collapse navbar-collapse">
			    
					<ul class="nav navbar-nav">
				    	<li><a href="#" wicket:id="homeLink" style="color:white;"><b>Home </b><i class="fa fa-home"></i></a></li>
				    </ul>
			      
			      	<ul class="nav navbar-nav navbar-right" style="padding-right: 35px;">
						<li><a href="#" wicket:id="logout" style="color:white;"><b>Log out </b></a></li>
					</ul>
				   
			    </div><!--/.nav-collapse -->
		  	</div>
		</div>
		<div class="container" style="height: 100%; width: 100%; padding-top: 5px;">
			<div class="row">
				<div class="col-md-1">
					<div class="sidebar-nav" data-spy="affix" data-offset-top="55">
						<ul class="nav nav-pills nav-stacked">
							<li class="col-md-12 active" style="padding-bottom: 15px;"><a
								href="#" wicket:id="home"><i class="fa fa-road fa-lg" style="color: #FFFFFF;"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-8">
					<div class="row" style="width: 100%;">
						<div id="wall-meets" class="panel panel-default panel-info">
							<div class="panel-heading" style="padding-right: 4px;">
								<b>Created Meetups</b>
							</div>
							<div id="PanelMeets" class="panel-body"
								style="max-height: 200px; overflow-y: auto; overflow-x: hidden;">
								<div wicket:id="PanelYourMeets"></div>
							</div>
						</div>
					</div>
					<div class="row" style="width: 100%;">
						<div id="wall-meets" class="panel panel-default panel-info">
							<div class="panel-heading" style="padding-right: 4px;">
								<b>Meetups You Assist</b>
							</div>
							<div id="PanelMeets" class="panel-body"
								style="max-height: 200px; overflow-y: auto; overflow-x: hidden;">
								<div wicket:id="PanelAssistMeets"></div>
							</div>
						</div>
					</div>
									<div class="row" style="width: 100%;">
					<div class="panel panel-default panel-info">
						<div class="panel-heading" style="padding-right: 8px;"><b>Edit your profile</b>
							<button id="btn" class="btn btn-primary pull-right" style="padding-top: 1px; padding-bottom: 1px; padding-right: 4px;">Edit! <i class="fa fa-edit fa-lg" style="color: #FFFFFF; padding-right: 4px;"></i></button>
						</div>
						<div class="panel-body" style="padding-top:25px; overflow-y: auto; overflow-x: hidden;">
							<form class="form-horizontal" role="form" id="formProfile" wicket:id="formProfile">
					 			<!-- <div class="form-group col-md-6" style="padding-left: 1px">
					   				<label for="inputName" class="col-sm-3 control-label">Name</label>
					    			<div class="col-sm-9">
					      				<input type="text" class="form-control" id="inputName" wicket:id="tname" placeholder="Name">
					    			</div>
					  			</div>
					  			<div class="form-group col-md-6 pull-right">
								    <label for="inputSurname" class="col-sm-3 control-label">Surname</label>
								    <div class="col-sm-9">
								    	<input type="text" class="form-control" id="inputSurname" wicket:id="tsurname" placeholder="Surname">
								    </div>
								</div>
								<div class="form-group col-md-6" style="padding-left: 1px">
					   				<label for="inputEmail" class="col-sm-3 control-label">Email</label>
					    			<div class="col-sm-9">
					      				<input type="email" class="form-control" id="inputEmail" wicket:id="tmail" placeholder="Email">
					    			</div>
					  			</div>
					  			<div class="form-group col-md-6 pull-right">
								    <label for="inputPassword" class="col-sm-3 control-label">Password</label>
								    <div class="col-sm-9">
								    	<input type="password" class="form-control" id="inputPassword" wicket:id="tpassword" placeholder="Password">
								    </div>
								</div> -->
								<div class="form-group col-md-6" style="padding-left: 1px">
					   				<label for="inputCity" class="col-sm-3 control-label">City</label>
					    			<div class="col-sm-9">
					      				<input type="text" class="form-control" id="inputCity" wicket:id="tcity" placeholder="City">
					    			</div>
					  			</div>
					  			<div class="form-group col-md-6 pull-right">
								    <label for="inputPhone" class="col-sm-3 control-label">Phone</label>
								    <div class="col-sm-9">
								    	<input type="text" class="form-control" id="inputPhone" wicket:id="tphone" placeholder="Phone">
								    </div>
								</div>
								<div class="form-group col-md-6" style="padding-left: 1px">
					   				<label for="inputSchool" class="col-sm-3 control-label">School</label>
					    			<div class="col-sm-9">
					      				<select	class="form-control" wicket:id="tschool" id="tschool" size="1">
										</select>
					    			</div>
					  			</div>
					  			<div class="form-group col-md-6 pull-right">
								    <label for="inputCar" class="col-sm-3 control-label">Car</label>
								    <div class="col-sm-9">
								    	<select	class="form-control" wicket:id="tcar" id="tcar">
											<option wicket:id="s0">Yes</option>
											<option wicket:id="s1">No</option>
										</select>
								    </div>
								</div>
								<div class="form-group col-md-6" style="padding-left: 1px">
					    			<div class="col-sm-9">
					      				<button class="btn btn-primary" id="upd" wicket:id="updateProfile">Update</button>
					    			</div>
					  			</div>
								<div class="form-group col-md-6 pull-right">
								    <label for="inputSex" class="col-sm-3 control-label">Sex</label>
								    <div class="col-sm-9">
								    	<select	class="form-control" wicket:id="tsex" id="tsex">
											<option wicket:id="s0">F</option>
											<option wicket:id="s1">M</option>
										</select>
								    </div>
								</div>
								
							</form>
						</div>
					</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="panel panel-default panel-info">
						<div class="panel-heading" style="padding-right: 4px;">
							<b>Profile</b>
						</div>
						<div class="panel-body">
							<h3 wicket:id="pname">Nom</h3>
							<h4 wicket:id="psurname">Cognom</h4>
						</div>
						</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		$('#formProfile *').attr('readonly', true);
		
		document.getElementById("btn").onclick=function(){
			$('#formProfile *').attr('readonly', false);
			};

		document.getElementById("upd").onclick=function(){
			$('#formProfile *').attr('readonly', true);
			};
		</script>
	</body>
</html>